
/*
 * @Author: jiu yin
 * @Date: 2023-04-27 14:23:19
 * @LastEditTime: 2023-06-12 20:07:34
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \AI admin\src\comment\role\index.tsx
 * jiu
 */
import { useState, useEffect, forwardRef, useImperativeHandle, } from 'react'
import './index.scss'
import { Checkbox } from 'antd';
import type { CheckboxChangeEvent } from 'antd/es/checkbox';

import routeArr from '@/router/routerArr';
import { deepClone } from '@/utils';



const Role = forwardRef((props: any, ref: any) => {
    let routerArrDeep = deepClone(routeArr)
    routerArrDeep = routerArrDeep.slice(1)

    let { type, disabled } = props

    // 读
    let [roleList, setRoleList] = useState<any[]>(props.roleList || [])

    //写
    let [roleListWrite, setRoleListWrite] = useState<any[]>(props.roleListWrite || [])


    console.log(roleList,"读");
    


    //复选框改变
    const modlueChange = (e: any) => {
        let checked = e.target.checked
        let value = e.target.value
        if (checked) {
            if (roleList.indexOf(value) === -1) setRoleList([...roleList, value])
        } else {
            let arr = roleList.filter((item) => item != value)
            setRoleList(arr)
        }
    }
    const modlueChangeWrite = (e: any) => {
        let checked = e.target.checked
        let value = e.target.value
        if (checked) {
            setRoleListWrite([...roleListWrite, value])
        } else {
            let arr = roleListWrite.filter((item) => item != value)
            setRoleListWrite(arr)
        }

    }




    useImperativeHandle(ref, () => ({
        getData: () => {
            return { roleList, roleListWrite };
        },
    }));

    const a = (e: any) => {
        console.log(e.target.value);

    }

    return (
        <div className='role'>

            {routerArrDeep.map((item: any, index: number) => {
                return (

                    <dl key={index}>
                        <dt>
                            <span className='span1'>{item.meta.name}</span>
                            {/* <span className='span2'></span>
                            <span className='span3'></span> */}
                        </dt>
                        {item.children.map((i: any, iindex: number) => {
                            if (i.meta.tier === 1) {
                                return (
                                    <dd key={iindex}>
                                        <span className='span1'>{i.meta.name}</span>
                                        <span className='span2'><Checkbox disabled={disabled} value={i.meta.key} onChange={(e) => modlueChange(e)} defaultChecked={type === "add" ? false : roleList.includes(i.meta.key)}>读</Checkbox></span>
                                        <span className='span2'><Checkbox disabled={disabled} value={i.meta.key} onChange={(e) => modlueChangeWrite(e)} defaultChecked={type === "add" ? false : roleListWrite.includes(i.meta.key)}>写</Checkbox></span>
                                    </dd>)
                            }
                        })}

                    </dl>
                )
            })}

        </div>





    )
})

// function Role() {

// }

export default Role
